<!--首页-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel=" stylesheet" href="css/swiper.min.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/swiper.min.js"></script>
</head>
<style>
    body{
        background-color: #fff;
    }
    .sch-cont { margin-left: 0.2rem; font-size: .2rem; color: #666; }
    .sch-cont .section { padding: 0.225rem 0 0.25rem; }
    .sch-cont .tit { font-size: .16rem; }
    .sch-cont .tit i { margin-right: .05rem; font-size: .15rem; color: #bfbfbf; }
    .sch-cont .tags { overflow: hidden;
        font-size: 0.15rem; }
    .sch-cont .tag { float: left; margin: .165rem .05rem 0; padding: 0 .05rem; border-radius: .08rem; background-color: #f4f4f4;
    }
    .sch-cont .tag.actice { color: #ff395c; }
    .sch-clear { padding-bottom: 0.15rem; text-align: center; font-size: .15rem; }
    .sch-clear a { color: inherit; }
    .sch-clear i { font-size: .15rem; color: #ff5f5f; }
</style>
<script type="text/javascript">
    $(window).load(function(){
        $(".loading").addClass("loader-chanage");
        $(".loading").fadeOut(300)
    })
</script>
<body>
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<div class="home_index">
    <div class="home_title">
        <!--<div class="t_left"><a href="#">福利</a></div>-->
        <div class="t_center">
            <div class="inp">
                <input type="text"  placeholder="复制商品标题省钱买" value="">
                <div class="in_btn"><a>&#10006</a></div>
            </div>
        </div>
        <!--<div class="t_right"><a href="#">分类</a></div>-->
    </div>
    <div class="viewPager_box">
        <div class="banner swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="images/indexBanner/1.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="images/indexBanner/2.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="images/indexBanner/3.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data-src="images/indexBanner/4.jpg" alt=""></a></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="container">
    <div class="column">
        <h2>
            <a class="title">推荐商品</a>
            <a href="commodityDetails.html" class="more" >更多</a>
        </h2>
        <dl>
            <dt><a href="commodityDetails.html" ><img class="" src="images/cosmetics.jpg"></a></dt>

            <dd><a href="commodityDetails.html"><img class="" src="images/shop.jpg"></a></dd>

            <dd><a href="commodityDetails.html"><img class="" src="images/picture.jpg"></a></dd>

        </dl>
    </div>
    <div class="column">
        <h2>
            <a class="title">最新商品</a>
            <a href="commodityDetails.html" class="more">更多</a>
        </h2>
        <dl>
            <dt><a href="commodityDetails.html"><img class="" src="images/model.jpg"></a></dt>

            <dd><a href="commodityDetails.html"><img class="" src="images/book.jpg"></a></dd>

            <dd><a href="commodityDetails.html"><img class="" src="images/child.jpg"></a></dd>

        </dl>
    </div>
    <div class="column">
        <h2>
            <a class="title">必抢单品</a>
            <a href="" class="more">更多</a>
        </h2>

    </div>
    <div class="ActivityList">
        <a href="commodityDetails.html">
            <div class="commodity_img"><img src="images/commodity_img_03.jpg"></div>
            <div class="commodity_content">
                <div class="goods_title"> <p>【浪莎】超薄超薄超薄超薄超薄超薄超薄超薄超薄超薄装装</p></div>
                <div class="currentPrice"><p>券后价<span>44844.00</span></p> <span>￥598.00</span></div>
                <div class="workOff">
                    <p>已售出<span>10086</span>件</p>

                    <div class="ticket">
                     <div class="ticket-price">￥186</div><div class="ticket-name">券
                         </div>
                       </div>

                </div>
            </div>
        </a>
    </div>
    <div class="ActivityList">
            <a href="commodityDetails.html">
                <div class="commodity_img"><img src="images/commodity_img_06.jpg"></div>
                <div class="commodity_content">
                    <div class="goods_title"> <p>【浪莎】超薄网眼舒适男装装</p></div>
                    <div class="currentPrice"><p>券后价<span>44844.00</span></p> <span>￥598.00</span></div>
                    <div class="workOff">
                        <p>已售出<span>10086</span>件</p>

                        <div class="ticket">
                            <div class="ticket-price">￥186</div><div class="ticket-name">券
                        </div>
                        </div>

                    </div>
                </div>
            </a>
        </div>
    <div class="ActivityList">
            <a href="commodityDetails.html">
                <div class="commodity_img"><img src="images/commodity_img_06.jpg"></div>
                <div class="commodity_content">
                    <div class="goods_title"> <p>【浪莎】6适男袜6双装装装装</p></div>
                    <div class="currentPrice"><p>券后价<span>44844.00</span></p> <span>￥598.00</span></div>
                    <div class="workOff">
                        <p>已售出<span>10086</span>件</p>

                        <div class="ticket">
                            <div class="ticket-price">￥186</div><div class="ticket-name">券
                        </div>
                        </div>

                    </div>
                </div>
            </a>
        </div>
    <div class="ActivityList">
            <a href="commodityDetails.html">
                <div class="commodity_img"><img src="images/commodity_img_03.jpg"></div>
                <div class="commodity_content">
                    <div class="goods_title"> <p>【浪莎】超薄网眼舒适装装装</p></div>
                    <div class="currentPrice"><p>券后价<span>444.00</span></p>
                        <p>原价￥598.00</p>
                    </div>


                    <div class="workOff">
                        <p>已售出<span>10086</span>件</p>
                        <div class="ticket">
                            <div class="ticket-price">￥186</div><div class="ticket-name">券
                        </div>
                        </div>

                    </div>
                </div>
            </a>
        </div>


    </div>


<div class="footer_box">
    <ul>
        <li><a href="index.html" style="color: #fc5459;">首页</a></li>
        <li><a href="assort.html">分类</a></li>
        <li><a href="activity.html">活动</a></li>
        <li><a href="personalCenter.html">我的</a></li>
    </ul>
</div>
</div>
<div class="search_index">
    <div class="search_title">
        <div class="t_left"><a href="#"></a></div>
        <div class="t_center">
            <div class="inp">
                <input type="text"  placeholder="复制商品标题省钱买" value="">
                <div class="in_btn"><a>&#10006</a></div>
            </div>
        </div>
        <div class="t_right"><a href="#">搜索</a></div>
    </div>
    <div class="container">
        <div class="scroll-wrap">
            <div >
                <div class="sch-cont">
                    <div class="section ">
                        <div class="tit"><i class="iconfont icon-hot"></i>热门搜索</div>
                        <div class="tags">
                            <span class="tag">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span><span class="tag">睡衣</span>
                            <span class="tag actice">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span><span class="tag">睡衣</span>
                            <span class="tag">外套</span><span class="tag actice">连衣裙</span><span class="tag">运动鞋</span>
                        </div>
                    </div>
                    <div class="section">
                        <div class="tit"><i class="iconfont icon-time"></i>最近搜索</div>
                        <div class="tags">
                            <span class="tag">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span><span class="tag">睡衣</span>
                            <span class="tag">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span><span class="tag">睡衣</span>
                            <span class="tag">外套</span><span class="tag">连衣裙</span><span class="tag">运动鞋</span>
                        </div>
                    </div>
                </div>
                <div class="sch-clear">
                    <a href="javascript:void(0)"><i class="iconfont icon-shanchu"></i>清除搜索历史</a>
                </div>
            </div>
        </div>

    </div>
</div>
    <script>

        $(function () {
            var banner = new Swiper('.banner',{ //轮播
                autoplay: 5000,
                pagination : '.swiper-pagination',
                paginationClickable: true,
                lazyLoading : true,
                loop:true
            });

            $(".search_index").hide();

            $(".inp input").focus(function () {
                console.log("66666666666666");
               $(".home_index").hide();
                $(".search_index").show();
            });
            
          $(".search_title .t_left a").click(function () {
              $(".home_index").show();
              $(".search_index").hide();
          });

            $(" .search_index .in_btn").click(function () {
                console.log("9");
                console.log($(" .search_index .inp input:first").val(""));
            })

        })

    </script>


</body>
</html>